<template>
    <div>
        <Card>
            <Row class="form-row">
                <Form :model="filters" ref="form1" label-position="right" :label-width="90" inline>
                    <FormItem label="应用名称">
                        <div class="filters-input">
                            <Input v-model="filters.name" placeholder="应用名称"/>
                        </div>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" icon="ios-search" @click="handleQuery('form1')">
                            搜索
                        </Button>
                    </FormItem>
                </Form>
            </Row>
            <Row class="form-row">
                <Button type="primary" icon="md-add" @click="handleAdd()" style="margin-right: 10px;">新增</Button>
            </Row>

            <el-table stripe border :loading="tableLoading" :data="tableData" ref="table" style="width: 100%">
                <template slot="empty">暂无数据</template>
                <el-table-column prop="title" label="应用名称"></el-table-column>
                <el-table-column prop="icon" label="应用图标"></el-table-column>
                <el-table-column prop="color" label="icon颜色"></el-table-column>
                <el-table-column prop="url" label="应用链接"></el-table-column>
                <el-table-column prop="typeInt" label="首页tab">
                    <template slot-scope="scope">
                        <p v-if="scope.row.typeInt == 1" style="color:blue">tab1</p>
                        <p v-if="scope.row.typeInt == 2" style="color:green">tab2</p>
                    </template>
                </el-table-column>
                <el-table-column prop="agentId" label="海纳应用id"></el-table-column>
                <el-table-column prop="callBackUrl" label="转发到前段的地址"></el-table-column>
                <el-table-column label="操作" width="150" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="handleAdd(scope.row.id)">修改</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total
                  show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
            </Page>
        </Card>

        <Modal v-model="formVisible" :title="modal && modal.id ? '修改' : '新增'" class="modal-content" width="900"
               :mask-closable="false">
            <Form :model="modal" :rules="rule" ref="form2" label-position="right" :label-width="110" class="myOpenFrom">
                <FormItem label="应用名称" prop="title">
                    <Input v-model="modal.title" placeholder="应用名称"></Input>
                </FormItem>
                <FormItem label="应用图标" prop="icon">
                    <Input v-model="modal.icon" placeholder="应用名称"></Input>
                </FormItem>
                <FormItem label="图标颜色" prop="color">
                    <el-color-picker v-model="modal.color"></el-color-picker>
                </FormItem>
                <FormItem label="应用链接">
                    <Input v-model="modal.url" placeholder="应用链接"></Input>
                </FormItem>
                <FormItem label="首页tab" prop="typeInt">
                    <RadioGroup v-model="modal.typeInt">
                        <Radio label="1">tab1</Radio>
                        <Radio label="2">tab2</Radio>
                    </RadioGroup>
                </FormItem>login-bg.jpg
                <FormItem label="海纳应用id">
                    <Input v-model="modal.agentId" placeholder="海纳应用id"></Input>
                </FormItem>
                <FormItem label="转发到前段的地址" prop="callBackUrl">
                    <Input v-model="modal.callBackUrl" placeholder="转发到前段的地址"></Input>
                </FormItem>
            </Form>

            <div slot="footer">
                <Button type="text" size="large" @click="onCancel">取消</Button>
                <Button type="primary" size="large" @click="handleSubmit" :loading="formLoading">确定</Button>
            </div>

        </Modal>
    </div>
</template>


<script>

    //校验规则
    const rules = {
        title: [
            {
                required: true,
                message: "请输入应用名称",
                trigger: "blur"
            }
        ],
        url: [
            {
                required: true,
                message: "请输入应用链接",
                trigger: "blur"
            }
        ],
        agentId: [
            {
                required: true,
                message: "请输入海纳应用id",
                trigger: "blur"
            }
        ],
        typeInt: [
            {
                required: true,
                message: "请选择首页tab",
                trigger: "blur"
            }
        ],
        icon: [
            {
                required: true,
                message: "请选择图标",
                trigger: "blur"
            }
        ],
        color: [
            {
                required: true,
                message: "请选择图标颜色",
                trigger: "blur"
            }
        ],
    };

    //加载数据
    let loadData = function () {
        if (this.tableLoading) return;
        this.tableLoading = true;
        let params = this.filters;
        params.pageNum = this.pageNum;
        params.pageSize = this.pageSize;
        console.log(params);
        //与后台交换数据
        this.postRequest("/api/categoryConfig/loadData", params).then(res => {
            // console.log(res);
            this.tableLoading = false;
            if (res.code == 20000) {
                this.tableData = res.data.list;
                this.pageTotal = res.data.total;
            } else {
                this.tableData = [];
                this.$Message.error({
                    content: res.message,
                    duration: 5
                });
            }
        });
    };
    //查询
    let handleQuery = function (name) {
        this.filters.pageNum = 1;
        this.loadData();
    };
    //打开页面
    let handleAdd = function (id) {
        this.modal = {};
        this.imageUrl = "";
        this.formVisible = true;
        let url = "/api/categoryConfig/openModel";
        if (id) {
            url = "/api/categoryConfig/openModel?id=" + id;
            this.getRequest(url).then(res => {
                console.log(res)
                this.tableLoading = false;
                if (res.code == 20000) {
                    this.modal = res.data
                    this.modal.typeInt = String(res.data.typeInt);
                    this.imageUrl = res.data.icon;
                } else {
                    this.$Message.error({
                        content: res.message,
                        duration: 5
                    });
                }
            });
        }
    };
    //保存
    let save = function () {
        let parms = this.modal;
        this.postRequest("/api/categoryConfig/saveOrUpdate", parms).then(res => {
            this.tableLoading = false;
            console.log(res)
            if (res.code == 20000) {
                this.formLoading = false;
                this.formVisible = false;
                this.$Message.success({
                    content: "保存成功！",
                    duration: 5
                });
                this.onCancel();
                this.loadData();
            } else {
                this.formLoading = false;
                this.$Message.error({
                    content: res.message,
                    duration: 5
                });
            }
        });
    };
    //保存
    let handleSubmit = function () {
        this.$refs["form2"].validate(valid => {
            if (valid) {
                this.formLoading = true;
                this.save();
            }
        });
    };
    //filter里面的
    let onCancel = function () {
        // this.$refs.upload.clearFiles();
        this.$refs["form2"].resetFields();
        this.formLoading = false;
        this.formVisible = false;
    };
    //formCode
    let cancelCode = function () {
        document.getElementById('qrcode').innerHTML = '';
        this.formCode = false;
    };

    export default {
        name: "userList",
        data() {
            return {
                date: '',
                data1: {},
                fileList: [],
                loadingStatus: false,
                //filter里面的
                name: "",
                //查询条件
                filters: {},
                //页码
                pageNum: 1,
                //每页数量
                pageSize: 10,
                //总数
                pageTotal: 0,
                //验证规则
                rule: rules,
                //表格数据
                tableData: [],
                //数据表格隐藏那个状态
                tableLoading: false,
                //对话框隐藏状态
                formVisible: false,
                formCode: false,
                //表单提交状态
                formLoading: false,
                modal: {},
                //图片
                imageUrl: '',
                disabledTwo: true,
                iconUrl: {},
            };
        },
        created: function () {
            this.loadData();
        },
        methods: {
            loadData,
            save,
            handleQuery,
            cancelCode,
            handlePage(value) {
                this.pageNum = value;
                this.loadData();
            },
            handlePageSize(value) {
                this.pageSize = value;
                this.loadData();
            },
            handleAdd,
            handleSubmit,
            onCancel,
            //图片
            iconName: function (name) {
                if (!name) {
                    this.disabledTwo = true;
                    this.$Message.warning('请先输入应用名称！');
                    return
                } else {
                    this.iconUrl = {
                        name: name + "_icon"
                    }
                    this.disabledTwo = false;
                    console.log(this.iconUrl);
                }
            },

            handleDelete: function (id) {
                this.$Modal.confirm({
                    title: '提示',
                    content: '确定删除该应用？',
                    onOk: () => {
                        this.getRequest("/api/categoryConfig/delete?id=" + id).then(res => {
                            this.tableLoading = false;
                            if (res.code == 20000) {
                                this.$Message.success({
                                    content: "删除成功",
                                    duration: 5
                                });
                                this.pageNum = 1;
                                this.loadData();
                            } else {
                                this.$Message.error({
                                    content: res.message,
                                    duration: 5
                                });
                            }
                        });
                    },
                    onCancel: () => {
                        // this.$Message.info('Clicked cancel');
                    }
                });
            }


        }
    };
</script>
